<template>
  <v-container fluid>
    <v-row>
      <v-col cols="12">
        <v-toolbar dense>
          <v-app-bar-nav-icon></v-app-bar-nav-icon>
          <v-toolbar-title>{{ $store.state.user.username }}的帖子</v-toolbar-title>
          <v-spacer></v-spacer>
          <!--搜索按钮-->
          <v-btn icon @click="search(searchContent)">
            <v-icon>mdi-magnify</v-icon>
          </v-btn>
          <!--搜索输入框-->
          <v-text-field hide-details single-line v-model="searchContent" label="搜索"></v-text-field>
          <v-btn icon @click="open('PostAdd', $store.state.user.id)">
            <v-icon>mdi-pencil</v-icon>
          </v-btn>
        </v-toolbar>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="12">
        <!--最近几个帖子的时间线，没有帖子提示没有帖子-->
        <v-timeline :dense="$vuetify.breakpoint.smAndDown" v-if="items.length !== 0">
          <v-timeline-item
            v-for="(item, index) in items"
            :key="index"
            large
          >
            <template v-slot:icon>
              <v-avatar>
                <v-img v-if="item.owner_image" :src="item.owner_image"></v-img>
                <v-img v-else src="../assets/avatar.jpg"></v-img>
              </v-avatar>
            </template>
            <template v-slot:opposite>
              <span>{{ item.owner }}</span>
            </template>
            <v-card class="elevation-2">
              <v-card-title class="headline">{{ item.title }}</v-card-title>
              <v-card-text>{{ item.desc }}</v-card-text>
              <v-card-actions>
                <!--详情页按钮-->
                <v-btn small link @click="open('PostDetail', item.id)" target="_blank">Learn More</v-btn>
                <!--修改按钮-->
                <v-btn small link color="primary" @click="open('PostEdit', item.id)">edit</v-btn>
                <!--删除按钮-->
                <v-btn small link color="error" @click="remove(item.id)">delete</v-btn>
                <v-spacer></v-spacer>
                <!--访问人数-->
                <v-badge :content="item.visitor_count.toString()" overlap bottom left>
                  <v-btn icon>
                    <v-icon>mdi-eye</v-icon>
                  </v-btn>
                </v-badge>
                <!--评论人数-->
                <v-badge :content="item.comment_count.toString()" overlap>
                  <v-btn icon>
                    <v-icon>mdi-comment</v-icon>
                  </v-btn>
                </v-badge>
              </v-card-actions>
            </v-card>
          </v-timeline-item>
        </v-timeline>
        <v-alert type="info" v-else>还没有发部过帖子，快来发一个吧！</v-alert>
      </v-col>
    </v-row>
    <!--分页-->
    <v-row v-show="items.length !== 0">
      <v-col cols="6" offset="3">
        <v-pagination v-model="page" :length="pageNumber" :total-visible="7"></v-pagination>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'PostManage',
  data: () => ({
    page: 1,
    pageNumber: 1,
    searchContent: '',
    items: []
  }),
  methods: {
    open (target, id = null) {
      // 跳转之前先判断当前路由名称是否和目标路由一致，如果一致就不跳转
      if (this.$route.name !== target) {
        if (id != null) {
          this.$router.push({
            name: target,
            params: {
              id: id
            }
          })
        } else {
          this.$router.push({
            name: target
          })
        }
        this.item = null
      }
    },
    remove (id) {
      this.$axios.delete('api/post/' + id + '/')
        .then(response => {
          console.log(response)
          // 删除后“刷新”页面
          this.$axios.get('api/post/', {
            params: {
              owner: this.$store.state.user.id
            }
          }).then(response => {
            console.log(response)
            this.items = response.data.results
          }).catch(error => {
            console.log(error)
          })
        }).catch(error => {
          console.log(error)
        })
    },
    search (searchContent) {
      this.$axios.get('api/post/', {
        params: {
          title: searchContent,
          owner: this.$store.state.user.id
        }
      }).then(response => {
        console.log(response)
        // 重新给items赋值
        this.items = response.data.results
        // 重新给页码总数赋值
        this.pageNumber = Math.ceil(response.data.count / 5)
        // 重新赋值当前页
        this.page = 1
      }).catch(error => {
        console.log(error)
      })
    }
  },
  created () {
    this.$axios.get('api/post/', {
      params: {
        owner: this.$store.state.user.id
      }
    }).then(response => {
      console.log(response)
      this.items = response.data.results
      // 设置页码总数
      this.pageNumber = Math.ceil(response.data.count / 5)
    }).catch(error => {
      console.log(error)
    })
  },
  watch: {
    page: function () {
      this.$axios.get('api/post/', {
        params: {
          page: this.page,
          owner: this.$store.state.user.id,
          title: this.searchContent
        }
      }).then(response => {
        console.log(response)
        // 重新设置items
        this.items = response.data.results
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>

</style>
